import '../ui/layui.all'
import './measuer.css'
import GlobeTracker from '../uitls/GlobeTracker'
import * as Cesium from 'cesium'
const  layerId = "globeDrawerDemoLayer";
// import dragIcon from './img/dragIcon.png'
const measuer = function(views){
    this.views = views
    var self = this
    this.guids={
        domId:this.guid(),
        treeId:this.guid()
    }
    this.temp = '<div class="cesium-widget-title">'+
    '<div class="title-info"><i class="layui-icon layui-icon-util"></i>测量工具</div>'+
    '<div class="title-btn">'+
        '<i class="layui-icon layer-btn layui-icon-close" data-method="close"></i>'+
   '</div></div>'+
    '<div class="cesium-widget-cont">'+
        '<ul class="tools-group">'+
            '<li title="距离"><i class="layui-icon layer-btn icon-measureDis" data-method="measuerDis"></i></li>'+
            '<li title="面积"><i class="layui-icon layer-btn icon-measureArea" data-method="measuerArea"></i></li>'+
            '<li title="清除"><i class="layui-icon layer-btn icon-clear" data-method="drawClear"></i></li>'+
        '</ul>'+
    '</div>'
    this.contanner = this._drawWidget()
    this.DynamicDrawTool =  new GlobeTracker(views);
}
measuer.prototype={
    guid:function() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
    },
    openWidget:function(){
        this.contanner.style.display = "block"
        // this.views.scene.globe.depthTestAgainstTerrain = false;
    },
    closeWidget:function(){
        this.contanner.style.display = "none"
        // this.views.scene.globe.depthTestAgainstTerrain = true;
    },
    _drawWidget:function(){
        var dom =  document.createElement("div");
        dom.className = "measuer cesium-widget";
        dom.id= this.guids.domId
        dom.innerHTML = this.temp;
        // var body = document.getElementsByTagName("body")[0];
        // body.appendChild(dom);
        var ViewDom = this.views.container
        ViewDom.appendChild(dom);
        this._bind()
        //让组件可以拖动，只在父容器中，并只能点击.cesium-widget-title拖动
        $('#'+this.guids.domId).draggabilly({ containment: true , handle: '.cesium-widget-title' });
        return dom
    },
    _bind:function(){
        var self = this
        var active = {
            measuerDis:function(){
                self.DynamicDrawTool.pickDistance(function (position, lonLat) {
                });
            },
            measuerArea:function(){
                self.DynamicDrawTool.pickArea(function (position, lonLat) {
                });
            },
            drawClear:function(){
                self.clearDraw();
            },
            close:function(){
                self.closeWidget()
            }
        }
        $(`#${this.guids.domId} .layer-btn`).on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    },
    clearDraw:function(){
        var self = this
        var datasourses = self.views.dataSources.getByName(layerId)
        for (var i = 0; i < datasourses.length; i++) {
            var datasourse = datasourses[i];
            self.views.dataSources.remove(datasourse,true)
        }
        var entityList = self.views.entities.values;
        if (entityList == null || entityList.length < 1) {
            return;
        }
        for (var i = 0; i < entityList.length; i++) {
            var entity = entityList[i];
            if (entity.layerId == layerId ) {
                self.views.entities.remove(entity);
                i--;
            }
        }
       
    }
}
export default measuer